<template>
  <div class="tool-detail">

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4">
      <div class="sm:flex items-start mt-5">
        <div class="mt-5 sm:mt-0 sm:mr-9 w-full w-pic">
          <a :href="tool.website"
            @click="handleExp"
            rel="dofollow"
            target="_blank"
            class="block rounded-lg w-full overflow-hidden tool-pic to-view-btn relative group">
            <common-image class="sm:h-49 w-full"
              :src="tool.image"
              :alt="toolName"
              :lazy="false"></common-image>
            <div class="visitWebsite hidden group-hover:flex text-2xl sm:text-3xl">
              {{$t('deatil_visitWebsite')}}
            </div>
          </a>
        </div>
        <div class="mt-5 sm:mt-0 sm:flex-1 sm:w-0">
          <div class="bar-title break-words mb-5"
            v-if="comparisons !== null">
            <h2>
              <span class="text-26 font-semibold text-gray-1000 group-hover:text-purple-1300">
                {{$t('detail_whatIs',{toolName:toolName})}}
              </span>
            </h2>
          </div>
          <h2 class="bar-title mb-5 break-words"
            v-else>
            <span class="text-gray-1000 text-xl font-medium break-words w-full">{{$t('productInformation')}} {{toolName}}</span>
          </h2>
          <p class="text-base leading-8 text-gray-1000 break-words"
            v-if="tool.description">
            {{tool.description}}
            <!-- {{getLocaleText(tool.description, tool.description_locales)}} -->
          </p>

          <div class="border-t border-gray-2000 mt-4 mb-4"
            v-if="tool.description"></div>

          <div class="pl-3 space-y-4"
            v-if="tool.created_at">
            <p class="min-dot text-gray-1000 text-base break-words">
              {{$t('addedOn')}}&nbsp;{{$formattedDate(tool.created_at, fI18n, locale)}}
            </p>
            <p class="min-dot text-gray-1000 text-base break-words">
              <span v-if="tool.attributes && tool.attributes.length>0">{{$t('provides')}} {{tool.attributes | fAttributes}}.&nbsp;</span>{{$t('detail_overMonthlyVisits',{monthVisitedCount: vReset(tool.month_visited_count)})}}
            </p>
          </div>

          <div class="flex items-start flex-wrap mt-5 gap-x-3 gap-y-3">
            <template v-for="(tItem, tKey) in tool.attributes">
              <div class="text-base text-purple-1700 border border-purple-1500 bg-purple-1600 max-w-max truncate rounded-2xl t-label"
                v-for="(cItem, cKey) in tItem.options"
                :key="`${tItem.handle}-${cItem.handle}-${tKey}-${cKey}`">
                {{cItem.name}}
              </div>
            </template>

            <template v-for="(tItem, tKey) in tool.categories">
              <common-link path="/category/:handle"
                v-if="tKey < 10"
                :params='{handle:tItem.handle }'
                class="text-base text-purple-1700 border border-purple-1500 bg-purple-1600 max-w-max truncate rounded-2xl t-label hover:bg-purple-1300 hover:text-white go-category-link"
                :key="tKey">{{tItem.name}}</common-link>
            </template>
            <el-popover placement="top"
              popper-class="w-11/12 max-w-md categories-popover"
              v-if="tool.categories && tool.categories.length > 10"
              :trigger="_isMobile() ? 'click':'hover'">
              <div class="flex items-start flex-wrap gap-x-3 gap-y-3 px-3 py-3">
                <template v-for="(tItem, tKey) in tool.categories">
                  <common-link path="/category/:handle"
                    v-if="tKey >= 10"
                    :params='{handle:tItem.handle }'
                    class="text-base text-purple-1700 border border-purple-1500 bg-purple-1600 max-w-max truncate rounded-2xl px-3 py-1 hover:bg-purple-1300 hover:text-white go-category-link"
                    :key="tKey">{{tItem.name}}</common-link>
                </template>
              </div>
              <div slot="reference"
                class="text-base text-purple-1700 border border-purple-1500 bg-purple-1600 max-w-max truncate rounded-2xl t-label more-icon flex items-center justify-center hover:bg-purple-1300 hover:text-white">
                <svg-icon className="text-sm mt--3"
                  iconName='shenglue'></svg-icon>
              </div>
            </el-popover>

            <div class="text-base text-gray-1800 border border-yellow-1100 bg-yellow-1200 max-w-max truncate rounded-2xl t-label flex items-center justify-center"
              :title="$t('monthlyVisits')">
              <svg-icon className="text-sm mt--3"
                iconName='similarweb'></svg-icon>
              <span class="ml-2">{{tool.month_visited_count | vResetVisit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-purple-1600 py-2.5 mt-8"
      v-if="recommendList && recommendList.length > 0">
      <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4">
        <h3 class="text-26 leading-normal text-purple-1300 font-semibold break-words mb-2">{{$t('recommend_youMayLike')}}</h3>
        <div class="tools grid gap-5 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          <min-tool v-for="(item, key) in recommendList"
            :isSearch="false"
            :key="item.handle+'-'+key"
            :toolPosIndex="key"
            toolPosition="工具详情-推荐"
            :toolsData="item"
            :lazyLoad="false"
            :isShowTraffic="false"></min-tool>
        </div>
      </div>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4">
      <div class="border-t border-gray-2000 mt-10 sm:mt-12 mb-11 content-visibility-auto"
        v-if="traffic && JSON.stringify(traffic)!=='{}' && traffic!==null && !(recommendList && recommendList.length > 0)"></div>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4"
      :class="{'mt-10 sm:mt-12': recommendList && recommendList.length > 0}">
      <tool-detail-website-traffic class="content-visibility-auto"
        :traffic="traffic"
        v-if="traffic && JSON.stringify(traffic)!=='{}' && traffic!==null"></tool-detail-website-traffic>

      <div class="border-t border-gray-2000 mt-10 sm:mt-12 mb-11"></div>

      <tool-detail-prices class="mt-20 content-visibility-auto"
        :tool="tool"
        :toolName="toolName"
        v-if="tool.prices && tool.prices.length>0">
      </tool-detail-prices>

      <h2 class="bar-title mt-20 mb-6"
        v-if="tool.review">
        <span class="text-gray-1000 font-semibold text-26">{{toolName}} {{$t('review')}}</span>
      </h2>
      <div class="pl-4"
        v-if="tool.review">
        <div class="space-y-5">
          <p class="dot text-base text-gray-1000 break-words leading-8"
            v-if="tool.review">
            {{tool.review}}
          </p>
          <!-- <p class="dot text-base text-gray-1000 break-words leading-8">
          <span v-if="tool.attributes && tool.attributes.length>0">{{$t('provides')}} {{tool.attributes | fAttributes}}.&nbsp;</span>Over {{tool.month_visited_count | vReset}} monthly visits.
        </p> -->
        </div>
        <!-- <p class="text-base text-gray-1400 mt-5 break-words leading-8">{{$t('note').replace(/\[.\/.\]/g, toolName)}}</p> -->
      </div>

      <tool-detail-traffic class="mt-20 content-visibility-auto"
        :tool="tool"
        :traffic="traffic"
        :toolName="toolName"
        v-if="traffic && JSON.stringify(traffic)!=='{}' && traffic!==null">
      </tool-detail-traffic>

      <tool-detail-categories class="mt-20 content-visibility-auto"
        :tool="tool"
        :toolName="toolName"
        v-if="tool.categories && tool.categories.length>0">
      </tool-detail-categories>

      <tool-detail-alternative class="mt-20 content-visibility-auto"
        :tool="tool"
        :toolsList="toolsList"
        :comparisons="comparisons"
        :toolName="toolName"
        v-if="toolsList && toolsList.length>0">
      </tool-detail-alternative>

      <tool-detail-comparisons class="mt-20 content-visibility-auto"
        :tool="tool"
        :comparisons="comparisons"
        :toolName="toolName"
        v-if="comparisons && comparisons !== null && comparisons.length > 0">
      </tool-detail-comparisons>

      <div class="mt-8 lg:mt-12"
        v-if="comparisons && comparisons !== null && comparisons.length > 0">
        <h2 class="text-gray-1000 text-26 font-semibold break-words w-full">{{$t('detail_faq_title',{toolName:toolName})}}</h2>
        <div class="mt-6">
          <h3 class="text-gray-1000 text-xl font-medium break-words w-full">
            {{$t('detail_what_is',{toolName:toolName})}}
          </h3>
          <p class="text-base text-gray-1000 break-words leading-7 mt-3">
            {{$t('detail_faq_desc',{toolName: toolName,toolCategory: getCategory(tool.categories), toolDesc:tool.description, addOn: $formattedDate(tool.created_at, fI18n, locale),monthVisit: vReset(tool.month_visited_count)})}}
          </p>
        </div>
      </div>

      <div class="mt-15 flex justify-center"
        v-if="hasRealVal(tool.has_review) && tool.has_review === 1">
        <common-link path="/review/:handle"
          target="_blank"
          :params="{ handle: tool.handle}"
          class="mt-4 sm:mt-0 flex items-center justify-between h-12 px-3 text-base border border-gray-1200 duration-100 hover:border-purple-1300 rounded group whitespace-nowrap">
          <span class="text-base text-gray-1000 group-hover:text-purple-1300">
            {{ $t('review_tooLReview', {toolName: toolName}) }}
          </span>
          <svg-icon className="ml-5 text-base text-gray-1000 group-hover:text-purple-1300"
            iconName='arrow_right'></svg-icon>
        </common-link>
      </div>
    </div>
  </div>
</template>

<script>
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'ToolDetailFirst',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    traffic: {
      type: Object,
      default: function () {
        return {}
      },
    },
    comparisons: {
      type: Array | null,
      default: null,
    },
    toolsList: {
      type: Array | null,
      default: () => {
        return []
      },
    },
    recommendList: {
      type: Array | null,
      default: () => {
        return []
      },
    },
    toolName: {
      type: String,
      default: '',
    },
  },
  filters: {
    vReset: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val <= 1000) {
          return val
        } else if (val > 1000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return val
      }
    },
    vResetVisit: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val < 5000) {
          return '< 5K'
        } else if (val >= 5000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return '< 5K'
      }
    },
    fAttributes: function (val) {
      let text = ''

      if (val && val.length > 0) {
        val.forEach((item) => {
          item.options.forEach((tItem) => {
            text = `${text}${text !== '' ? ', ' : ''}${tItem.name}`
          })
        })
      }
      return text
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  mixins: [mixinsExposure],
  data() {
    return {
      faqs: [
        {
          title: 'deatil_faq01_title',
          desc: 'deatil_faq01_desc',
          show: false,
        },
        {
          title: 'deatil_faq02_title',
          desc: 'deatil_faq02_desc',
          show: false,
        },
        {
          title: 'deatil_faq03_title',
          desc: 'deatil_faq03_desc',
          show: false,
        },
        {
          title: 'deatil_faq04_title',
          desc: 'deatil_faq04_desc',
          show: false,
        },
        {
          title: 'deatil_faq05_title',
          desc: 'deatil_faq05_desc',
          show: false,
        },
        {
          title: 'deatil_faq06_title',
          desc: 'deatil_faq06_desc',
          show: false,
        },
        {
          title: 'deatil_faq07_title',
          desc: 'deatil_faq07_desc',
          show: false,
        },
      ],
    }
  },
  methods: {
    ...mapActions(['exposure']),
    resetPath(tHandle, cHandle) {
      let query = {}
      query.attributes = `${tHandle}-${cHandle}`
      return query
    },
    fI18n(arg) {
      const hasKey = this.$i18n.t(arg)
      if (hasKey) {
        const result = this.$i18n.t(arg)
        return result
      }
      return arg
    },
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },
    faqShow(item) {
      item.show = !item.show
    },
    vReset(val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val <= 1000) {
          return val
        } else if (val > 1000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return val
      }
    },
    getCategory(category) {
      let cText = ''
      if (category && category.length > 0) {
        category.forEach((item) => {
          cText = `${cText}${cText !== '' ? ', ' : ''}${item.name}`
        })
      }
      return cText
    },
    _isMobile() {
      if (process.browser) {
        let flag = navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
        return flag
      } else {
        return false
      }
    },
    handleExp: _.throttle(function () {
      let exporeData = this.getExporeData(this.tool, null, null, false, {
        target_url: this.tool.website,
        page_position: 'Visit Website',
      })
      this.exposure({
        ...exporeData,
      })
    }, 2000),
  },
}
</script>
<style lang='scss' scoped>
.tool-detail {
  .dot {
    position: relative;
    &::before {
      position: absolute;
      left: -16px;
      top: 13px;
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #2f3032;
    }
  }
  .min-dot {
    position: relative;
    &::before {
      position: absolute;
      left: -12px;
      top: 9px;
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #2f3032;
    }
  }

  .t-label {
    padding: 4px 12px;
  }

  .questions {
    box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.12);
    border-radius: 50%;
  }
  .more-icon {
    height: 34px;
  }
}
</style>